<ui:composition template="/WEB-INF/templates/main-template.xhtml" 
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" >
	
	<ui:param name="pageName" value="Create Budgets" />
	
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml"/>
	</ui:define>
	<ui:define name="content">		
		
	<h:form id="rrfBudget"> 
	    <p:growl/>
		 <h:outputText value="RRF Budgets" styleClass="outputTextTitle"/>	
		
		
        <p:tabView id="Table" > 
				
		<p:tab id="tab1" title="Create RRF Budget" >  
		   <h:panelGrid columns="3" cellspacing="8" columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText" >
                       		           
			           <h:outputLabel value="Module Name" />
			           <h:outputLabel value=":" />
			           <p:selectOneMenu value="#{createBudgetBean.rrfBudget.moduleName}" style="width:160px;">
			           		<f:selectItem itemLabel="--Choose One--" itemValue="" />
			           		<f:selectItems value="#{createBudgetBean.modulesMap}" />
			           </p:selectOneMenu> 
			           
			           <h:outputLabel value="Financial Year" />
			           <h:outputLabel value=":" />
			           <p:inputText value="#{createBudgetBean.rrfBudget.financialYear}" maxlength="4"/>
			          			           
			           <h:outputLabel value="BudgetCode" />
			           <h:outputLabel value=":" />
			           <p:inputText value="#{createBudgetBean.rrfBudget.budgetCode}" />
			           
			           <h:outputLabel value="Q1 Budget" />
			           <h:outputLabel value=":" />
			           <p:inputText value="#{createBudgetBean.rrfBudget.q1Budget}">
			           		<p:ajax event="change" listener="#{createBudgetBean.getTotalBudgetListener}" update="totalBudget"/>
			           </p:inputText>
			           
			           <h:outputLabel value="Q2 Budget" />
			           <h:outputLabel value=":" />
			           <p:inputText value="#{createBudgetBean.rrfBudget.q2Budget}" >
			           		<p:ajax event="change" listener="#{createBudgetBean.getTotalBudgetListener}" update="totalBudget"/>
			           </p:inputText>
			           
			           <h:outputLabel value="Q3 Budget" />
			           <h:outputLabel value=":" />
			           <p:inputText value="#{createBudgetBean.rrfBudget.q3Budget}" >
			           		<p:ajax event="change" listener="#{createBudgetBean.getTotalBudgetListener}" update="totalBudget"/>
			           </p:inputText>   
			           
			           <h:outputLabel value="Q4 Budget" />
			           <h:outputLabel value=":" />
			           <p:inputText value="#{createBudgetBean.rrfBudget.q4Budget}" >
			           		<p:ajax event="change" listener="#{createBudgetBean.getTotalBudgetListener}" update="totalBudget"/>
			           </p:inputText>
			           
			           <h:outputLabel value="Total Budget" /> 
			           <h:outputLabel value=":" />
			           <p:inputText readonly="true" id="totalBudget" value="#{createBudgetBean.rrfBudget.totalBudget}" />
			           
		   </h:panelGrid>     
           <h:panelGrid style="padding-top: 5px; width: 100%; border-top: 1px solid #d9d9d9"
						columnClasses="gridCellMiddleRightAligned">
			  <h:panelGroup>
		           <p:commandButton  value="Submit" update="@form"  actionListener="#{createBudgetBean.confirmationAction}"   />
		           <p:commandButton value="Home" action="wudashboard" /> 		           
	          </h:panelGroup>
		   </h:panelGrid>					
		</p:tab> 
				
		<p:tab id="tab2" title="Edit Budget"> 				
			
        
	            
		</p:tab>
		<p:tab id="tab3" title="View/Search Budget">
			 
		</p:tab>	
			
	 </p:tabView>
          
        <p:confirmDialog widgetVar="budgetConfirmation" id="budgetConfirmation" severity="alert" message="Do you want to save asset. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Save Now" action="#{createNewAssetBean.saveAssetRequestAction}" update="@form" oncomplete="budgetConfirmation.hide()"/>
					<p:commandButton id="decline" value="Not Yet" onclick="budgetConfirmation.hide()" type="button" />
				</h:panelGroup>
		</p:confirmDialog>
        
	 
     </h:form>
	</ui:define>
	
</ui:composition>
